// index.js
import express from 'express'
const app = express()

// 解析 JSON 请求体
app.use(express.json())
app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*') // 允许所有源
  res.header('Access-Control-Allow-Methods', 'GET,POST,PUT,DELETE,OPTIONS')
  res.header('Access-Control-Allow-Headers', '*')
  // 处理 OPTIONS 预检请求
  if (req.method === 'OPTIONS') {
    return res.sendStatus(204)
  }
  next()
})

app.get('/info', (req, res) => {
    const user = {
        id:12,
        name: '张三',
        age: 18,
        sex: '男',
        role:'admin'
    }
  const userHtml = `
    <div class="user-card">
      <h3>用户信息</h3>
      <p>ID: ${user.id}</p>
      <p>姓名: ${user.name}</p>
      <p>年龄: ${user.age}</p>
      <p>角色: ${user.role}</p>
    </div>
  `;

  // 发送 HTML 响应（设置 Content-Type 为 text/html，Express 会自动识别）
  res.send(userHtml);
})

// 静态文件托管 (public目录)
app.use(express.static('public'))
// 核心接口：返回首页文章列表的 HTML 标签片段
const articles = [
  { id: 1, title: 'HTMX 入门教程', author: '张三', date: '2024-05-01' },
  { id: 2, title: 'Express 后端开发最佳实践', author: '李四', date: '2024-05-02' },
  { id: 3, title: 'HTMX + Express 无框架开发', author: '王五', date: '2024-05-03' }
];
app.get('/api/home-articles', (req, res) => {
  // 模拟从数据库获取首页文章数据

  // 拼接 HTML 标签片段（无需完整 HTML 结构，只返回列表部分）
  const articlesHtml = `
    <ul class="article-list" style="list-style: none; padding: 0; margin-top: 20px;">
      ${articles.map(article => `
        <li style="border: 1px solid #eee; padding: 16px; margin: 8px 0; border-radius: 4px;">
          <h3 style="margin: 0; color: #1890ff;">${article.title}</h3>
          <p style="margin: 8px 0; color: #666;">作者：${article.author} | 日期：${article.date}</p>
          <a href="http://127.0.0.1:5500/article/detail.html?id=${article.id}" style="color: #1890ff; text-decoration: none;">查看详情</a>
        </li>
      `).join('')}  <!-- map 返回数组，需用 join('') 转为字符串 -->
    </ul>
  `;

  // 发送 HTML 响应（Express 自动设置 Content-Type: text/html）
  res.send(articlesHtml);
});
// 文章详情接口
app.get('/api/article-detail', (req, res) => { 
    const article = articles.find(article => article.id == req.query.id);
    res.send(`
    <div style="padding: 20px; border: 1px solid #eee; border-radius: 4px; margin-top: 20px;">
      <h2 style="color: #1890ff;">${article.title}</h2>
      <p style="color: #666;">作者：${article.author} | 日期：${article.date}</p>
      `)
});

// 启动服务
const PORT = 3000
app.listen(PORT, () => {
  console.log(`Server running at http://localhost:${PORT}`)
})